<template>
  <card ref="Card">
    <div slot="header">
      <el-input placeholder="订单号" v-model="search.number" style="width: 160px;margin-bottom: 5px" clearable @keyup.enter.native="getData"/>
      <el-input placeholder="收件人姓名" v-model="search.receiverName" class="ml-5" style="width: 140px" clearable @keyup.enter.native="getData"/>
      <el-input placeholder="收件人联系电话" v-model="search.receiverPhone" class="ml-5" style="width: 140px" clearable @keyup.enter.native="getData"/>
      <el-input placeholder="寄件人联系电话" v-model="search.senderPhone" class="ml-5" style="width: 140px" clearable @keyup.enter.native="getData"/>
      <date-time-picker class="ml-5" :start.sync="search.beginUpdateTime" :end.sync="search.endUpdateTime"/>
      <el-select v-model="search.state" class="ml-5" style="width:95px" placeholder="状态" clearable>
        <el-option label="揽收" :value="0"/>
        <el-option label="发出" :value="1"/>
        <el-option label="到达" :value="2"/>
        <el-option label="待取件" :value="3"/>
        <el-option label="问题件" :value="4"/>
        <el-option label="签收" :value="5"/>
      </el-select>
      <el-button type="success" @click="getData" class="ml-10">搜索</el-button>
      <el-button type="warning" @click="clearSearch">清空</el-button>
    </div>
    <el-button v-permission="['admin']" :disabled="selectList.length===0" type="danger" @click="delDataMore">批量删除</el-button>
    <el-button :disabled="selectList.length===0" type="success" @click="printMore">批量打印</el-button>
    <export-p-d-f class="float-right ml-10"/>
    <export-special class="float-right ml-10"/>
    <export-order class="float-right"/>
    <selection-table :data="formData" :keys.sync="selectList" :strings.sync="orderList">
      <el-table-column prop="number" label="订单号" width="165"></el-table-column>
      <el-table-column prop="senderName" label="寄件人姓名"></el-table-column>
      <el-table-column prop="senderPhone" label="寄件人联系电话"></el-table-column>
      <el-table-column prop="receiverName" label="收件人姓名"></el-table-column>
      <el-table-column prop="receiverPhone" label="收件人联系电话"></el-table-column>
      <el-table-column label="更新时间" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.updateTime | formatDateTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="70">
        <template slot-scope="scope">
          <span>{{$state(scope.row.state)}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="220">
        <template slot-scope="scope">
          <el-button icon="el-icon-document-copy" @click.stop="print(scope.row.number)" type="success"/>
          <el-button icon="el-icon-view" @click.stop="see(scope.row)"/>
          <delete-button :ref="scope.row.id" :id="scope.row.id" @start="delData" v-permission="['admin']"/>
        </template>
      </el-table-column>
    </selection-table>
    <pagination ref="Pagination" @update="getData"/>
    <order-detail ref="OrderDetail"/>
    <print-more ref="PrintMore"/>
    <print-only ref="PrintOnly"/>
  </card>
</template>

<script>
  import DateTimePicker from '@/components/DateTimePicker'
  import OrderDetail from '@/views/components/OrderDetail'
  import {delExpressOrderApi, pageExpressOrderApi} from '@/api/order'
  import {resetForm} from "@/utils/common";
  import ExportOrder from '@/views/export/ExportOrder'
  import ExportSpecial from '@/views/export/ExportSpecial'
  import ExportPDF from '@/views/export/ExportPDF'
  import PrintMore from '@/views/print/print_more'
  import PrintOnly from '@/views/print/print_only'

  export default {
    name: 'OrderList',
    components: {DateTimePicker, OrderDetail, PrintMore, PrintOnly, ExportOrder, ExportSpecial, ExportPDF},
    data() {
      return {
        formData: [],
        selectList: [],
        orderList: [],
        /* 搜索 */
        search: {
          number: '',
          receiverName: '',
          receiverPhone: '',
          senderPhone: '',
          beginUpdateTime: '',
          endUpdateTime: '',
          state: null
        }
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      // 获取
      getData() {
        let pagination = this.$refs.Pagination;
        let param = {
          current: pagination.current,
          size: pagination.size,
          number: this.search.number,
          receiverName: this.search.receiverName,
          receiverPhone: this.search.receiverPhone,
          senderPhone: this.search.senderPhone,
          beginUpdateTime: this.search.beginUpdateTime,
          endUpdateTime: this.search.endUpdateTime,
          state: this.search.state
        };
        if (!param.beginUpdateTime) delete param.beginUpdateTime;
        if (!param.endUpdateTime) delete param.endUpdateTime;
        this.$refs.Card.start();
        pageExpressOrderApi(param).then(result => {
          let response = result.resultParam.expressOrderPage;
          this.formData = response.records;
          pagination.total = response.total;
          this.$refs.Card.stop();
        })
      },
      // 打印单个
      print(order) {
        let _this = this.$refs.PrintOnly;
        _this.visible = true;
        _this.orderNumber = order;
        _this.getPrint();
      },
      // 批量打印
      printMore() {
        let _this = this.$refs.PrintMore;
        _this.visible = true;
        _this.numberList = this.orderList;
        _this.getPrint();
      },
      // 查看详情
      see(obj) {
        let _this = this.$refs.OrderDetail
        _this.visible = true
        _this.obj = obj
      },
      // 删除单条
      delData(id) {
        delExpressOrderApi({ids: id})
          .then(() => {
            this.getData();
            this.$refs[id].close()
          })
          .catch(() => {
            this.$refs[id].stop();
          })
      },
      // 批量删除
      delDataMore() {
        this.$msgBox('确认删除订单？').then(() => {
          this.$startLoading();
          delExpressOrderApi({ids: this.selectList}).then(() => {
            this.$stopLoading();
            this.getData()
          }).catch(() => {
            this.$stopLoading();
          })
        })
      },
      // 清空搜索
      clearSearch() {
        resetForm(this, 'search', null).then(() => {
          this.getData();
        })
      }
    }
  }
</script>
